<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-03 16:44:11
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-17 14:14:10
-->
<template>
  <el-scrollbar class="form-panel bank-info">
    <el-form :model="params" class="demo-form-inline" ref="params" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankName')" prop="openingBank">
            <el-input
              v-model="params.openingBank"
              maxlength="50"
              :placeholder="$t('certification.enterprise.bankNamePlaceholder')"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankAccountNumber')" prop="bankAccount">
            <el-input
              v-model="params.bankAccount"
              maxlength="50"
              :placeholder="$t('certification.enterprise.bankAccountNumberPlaceholder')"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankLocation')" prop="bankLocation">
            <el-input
              v-model="params.bankLocation"
              maxlength="50"
              :placeholder="$t('certification.enterprise.bankLocationPlaceholder')"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankClass')" prop="bankCategory">
            <x-select
              :placeholder="$t('certification.enterprise.bankClassPlaceholder')"
              v-model="params.bankCategory"
              :options="dictOptions['bank_category']"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.bankConnectioNumber')" prop="bankNumber">
            <el-input
              v-model="params.bankNumber"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.bankConnectioNumberPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('certification.enterprise.accountOpeningPermi')" prop="files">
            <!-- <template #label>
              <em class="required-icon"> * </em>
              <span>{{ $t('certification.enterprise.accountOpeningPermi') }}</span>
            </template> -->
            <!-- 银行许可证扫描件 -->
            <x-upload
              ref="fileUpload"
              :edit-flag="true"
              :limit="9"
              :fileSize="20"
              :old-file-list="params.files || []"
              :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx']"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script>
  import { cloneDeep } from '@package/utils'
  import { apiPostAddBank, apiGetBank, apiPostUpdateBank } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'BankInfo',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      },
      supplierId: {
        type: String
      }
    },
    data() {
      return {
        params: {
          openingBank: '',
          bankAccount: '',
          bankLocation: '',
          bankCategory: '',
          bankNumber: '',
          files: []
        },
        rules: {
          openingBank: [
            { required: true, message: this.$t('certification.enterprise.bankNamePlaceholder'), trigger: 'blur' }
          ],
          bankAccount: [
            {
              required: true,
              message: this.$t('certification.enterprise.bankAccountNumberPlaceholder'),
              trigger: 'blur'
            }
          ],
          bankLocation: [
            { required: true, message: this.$t('certification.enterprise.bankLocationPlaceholder'), trigger: 'blur' }
          ],
          bankCategory: [
            {
              required: true,
              message: this.$t('certification.enterprise.bankClassPlaceholder'),
              trigger: ['blur', 'change']
            }
          ],
          bankNumber: [
            {
              required: true,
              message: this.$t('certification.enterprise.bankConnectioNumberPlaceholder'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    watch: {
      supplierId: {
        handler(val) {
          if (val) {
            this.getDetail()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      async getDetail() {
        const { data } = await apiGetBank(this.supplierId)
        this.params = Object.assign(this.params, cloneDeep(data))
      },
      handleVaildForm() {
        return new Promise((resolve) => {
          this.$refs.params.validate((valid) => {
            if (valid) {
              // const { fileList } = this.$refs.fileUpload
              // if (!fileList || !fileList?.length) {
              //   this.$message.error(this.$t('certification.enterprise.accountOpeningPermiPlaceholder'))
              //   return resolve(false)
              // }
              resolve(true)
            } else {
              resolve(false)
            }
          })
        })
      },
      onSumit(isVaild = true) {
        return new Promise(async (resolve, reject) => {
          const isSubmit = !isVaild || (await this.handleVaildForm())
          if (isSubmit) {
            const { fileList } = this.$refs.fileUpload
            const param = {
              ...this.params,
              files: fileList?.length
                ? fileList.map((item) => {
                    return {
                      fileName: item.name || item.fileName,
                      filePath: item.filePath || item.response.data.filePath,
                      fileType: (item.name || item.fileName).slice((item.name || item.fileName).lastIndexOf('.') + 1),
                      remark: item.remark
                    }
                  })
                : [],
              supplierId: this.supplierId
            }
            try {
              const { data, code } = 'id' in this.params ? await apiPostUpdateBank(param) : await apiPostAddBank(param)
              if (EnumApiCode.Success === code) {
                // this.getDetail()
                resolve(data)
              } else {
                reject()
              }
            } finally {
              reject()
            }
          } else {
            reject()
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .required-icon {
    margin-right: 4px;
    color: #f56c6c;
  }
</style>
